<template>
	<view class="list-box">
		<!-- .center{
			display:flex;
			align-items: center;
			justify-content: center;
		} 
		center的公共样式 flex布局，水平垂直居中-->
		<view class="title space-between center">

			<view class="center">
				<text class="name">{{name}}</text>
				<text class="word" v-if="word">{{word}}</text>
			</view>
			<view class="all">

				<text>前部</text>
				<text class="iconfont icon-right">&#xe6a3;</text>

			</view>
		</view>

		<!-- //使用插槽 相当于站位的使用-->
		<slot></slot>

	</view>
</template>

<script>
	import mockCourseData from "@/mock/courseData.js"
	export default {

		components: {
		},
		props: {
			name: {
				type: String,
				default: "热门推荐"
			},
			word: {
				type: String,
				default: ""
			}

		}

	}
</script>

<style lang="scss">
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 15px;
	}
	.list-box {
		margin-top: 60rpx;

		.name {
			font-size: 38rpx;
			font-weight: 500;
			color: #303133;
			margin-right: 10rpx;
		}

		.word {
			font-size: 20rpx;
			// linear-gradient颜色渐变
			// background-image: linear-gradient(to right, $mxg-color-orange, $mxg-text-color-red);
			color: white;
			background: #fa1c11;
			padding: 0 10rpx;
			border-radius: 30rpx 30rpx 30rpx 0;
		}

		.all {
			font-weight: normal;
			font-size: 28rpx;
			color:#999;
			// color: $mxg-text-color-grey;

			.iconfont {
				font-size: 25rpx;
			}
		}

		
	}
</style>

